<template>
  <a-card>
    <a-form :model="queryParams" layout="inline" ref="queryParamsRef">
      <div class="flex flex-wrap space-x-4">

        <a-form-item
            label="住户姓名"
            name="name"

        >
          <a-input
              placeholder="请输入住户姓名"
              v-model:value="queryParams.name"></a-input>
        </a-form-item>
        <a-form-item
            label="性别"
            name="gender"
            :rules="[{ required: true, message: '请选择性别' }]"
        >
          <a-select
              placeholder="请选择性别"
              style="width: 250px"
              :options="Object.keys(commonDict.genderType).map(x => ({label:commonDict.genderType[x],value:x}))"
              v-model:value="queryParams.gender"></a-select>
        </a-form-item>
        <a-form-item
            label="联系电话"
            name="phoneNumber"

        >
          <a-input
              placeholder="请输入联系电话"
              v-model:value="queryParams.phoneNumber"></a-input>
        </a-form-item>

        <div class="space-x-2">
          <a-button type="primary" @click="residentInfoStore.getResidentInfoPage(queryParams)">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </div>
      </div>
    </a-form>
  </a-card>
</template>

<script setup>
import {ref} from 'vue';
import {useResidentInfoStore} from '@/stores/residentInfoStore.js';
import * as commonDict from '@/utils/commonDict.js'


const residentInfoStore = useResidentInfoStore()

const queryParamsRef = ref(null)
const queryParams = ref({
  name: '',
  gender: undefined,
  phoneNumber: '',
})

function resetQuery() {
  queryParamsRef.value.resetFields()
  residentInfoStore.getResidentInfoPage(queryParams)
}

</script>

<style scoped>

</style>
